<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Message from '@sscd/message';
  const key = 'updatable';
  const openMessage = () => {
    Message.loading({ content: 'Loading...', key });
    setTimeout(() => {
      Message.success({ content: 'Loaded!', key, duration: 2 });
    }, 1000);
  };
  const content = ref('Loading...');
  const openMessage2 = () => {
    Message.loading({ content: () => content.value });
    setTimeout(() => {
      content.value = 'Loaded!';
    }, 1000);
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">更新消息内容</div>
    <div class="demo-content">
      <Button type="primary" @click="openMessage">Open the message box (update by key)</Button>
      <br />
      <br />
      <Button type="primary" @click="openMessage2">
        Open the message box (update by reactive)
      </Button>
    </div>
  </div>
</template>
